<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #my-swiper{
            width: 400px;
            height: 550px;
            margin: 0 auto;
            position: relative;
        }
  
        #box{
            width: 100%;
            height: 100%;
        }

        img{
            width: 100%;
            height: 100%;
        }

        #box .item{
            display: none;
        }

        #box .item.active{
            display: block;
        }

        .my-pagination{
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
        }

        .square{
            width: 15px;
            height: 15px;
            background-color: #fff;
            display: inline-block;
            margin-right: 5px;
        }

        .square:last-child{
            margin-right: 0;
        }

        .square.active{
            background-color: aqua;
        }

        #swiper-button-prev{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        #swiper-button-next{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="my-swiper">
        <div id="box">
            <div class="item active">
                <img src="/images/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images//4.jpg" alt="">
            </div>
        </div>

        <!-- 分页器pagination 的功能在js实现，但是样式要提前制作 -->
        <div class="my-pagination">
            <div class="square active"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>

        <!-- 如果需要导航按钮 -->
        <div id="swiper-button-prev"></div>
        <div id="swiper-button-next"></div>
    </div>
</body>
</html>


<script>
    let box = document.getElementById('box');

    let myswiper = document.getElementById('my-swiper');

    let squares = document.querySelectorAll('.square');

    let btnPrev = document.getElementById('swiper-button-prev');

    let btnNext = document.getElementById('swiper-button-next');

    let index = 0;

    let timer = setInterval(function(){
        index++;
        if(index > 3){
            index = 0;
        }
        change();
    }, 2000);

    function change(){
        for(let i = 0; i < box.children.length; i++){
            box.children[i].classList.remove('active');
            squares[i].classList.remove('active');
        }
        box.children[index].classList.add('active');
        squares[index].classList.add('active');
    }

    for(let i = 0; i < squares.length; i++){
        squares[i].onclick = function(){
            index = i;
            change();
        }
    }

    box.onmouseover = function(){
        clearInterval(timer);
    }

    box.onmouseout = function(){
        timer = setInterval(function(){
            index++;
            if(index > 3){
                index = 0;
            }
            change();
        }, 2000);
    }

    btnPrev.onclick = function(){
        index--;
        if(index < 0){
            index = 3;
        }
        change();
    }


    btnNext.onclick = function(){
        index++;
        if(index > 3){
            index = 0;
        }
        change();
    }



</script>